import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {Row, Col, Button, Input, Icon, Form} from 'antd';
import {InputItem} from '../../../../component/input/Input';
import {SelectItem} from '../../../../component/select/Select';
import {SearchForm} from '../../../../component/searchForm/SearchForm';
import {TagBaseFormStore, addStore, listStore, searchStore} from '../TagStore';
import './SearchBarStyle.less';

const FormItem = Form.Item;

@observer
export class TagListSearchBar extends React.Component<any, any> {

    componentDidMount(){
        searchStore.getAppId()
    }

    toggle = () => {
        searchStore.OnExpand(searchStore.expand);
    }

    onClear = () => {
        searchStore.clearSearch(listStore);
    }

    onSearch = (me) => {
        listStore.load(searchStore.getValues());
    }

    componentWillUnmount() {
        searchStore.clearSearchState();
    }

    render() {
        return (
            <div>
                <Row gutter={2} className="group-bar">
                    <Col span={21} style={{paddingLeft: 10}}>
                        <Button
                            type="primary"
                            icon="plus-circle-o"
                            onClick={() => {
                                addStore.load()
                            }}>
                            添加
                        </Button>
                        <Button type="primary" icon="reload" onClick={() => {
                            listStore.refresh(searchStore)
                        }} loading={listStore._RefreshLoading}>刷新</Button>
                    </Col>
                    <Col span={3} style={{display: 'flex', justifyContent: 'flex-end'}}>
                        <Button
                            style={{marginLeft: 8, marginRight: 0}}
                            onClick={this.toggle}
                        >
                            搜索
                            <Icon type={searchStore.expand ? 'up' : 'down'}/>
                        </Button>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <SearchForm
                            onClear={this.onClear}
                            onSearch={this.onSearch}
                            store={searchStore}>
                            <SearchFormItem/>
                        </SearchForm>
                    </Col>
                </Row>
            </div>
        )
    }
}

@observer
class SearchFormItem extends React.Component<{}, any> {

    onChangeAppId = (value) => {
        searchStore.valid('appId', value);
    }

    render() {
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
        };

        return (
            <div>
                <Row>
                    <Col span={8}>
                        <SelectItem
                            {...formItemLayout}
                            mykey="appId"
                            title="应用名称"
                            store={searchStore}
                            onChange={this.onChangeAppId}/>
                    </Col>
                    <Col span={8}>
                        <InputItem
                            {...formItemLayout}
                            myKey="name"
                            title="标签名称"
                            store={searchStore}/>
                    </Col>
                </Row>
            </div>
        )
    }
}